<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>权限范围管理</title>
		<div th:replace="common/common_grid_header"></div>
	</head>
	<body style="overflow-y: scroll; ">
		<input type="text" id="roleid" name="roleid" th:value="${roleid}" hidden="">
		<div style="height: 100%">
			<div class="layui-row"> 
				<table id="pertable" class="layui-table" lay-filter="pertable"></table> 
			</div>
		</div>
	</body>
	<script th:inline="javascript">
	var roleid = $("#roleid").val();
	var rangeList = [[${rangeList}]];
		layui.config({
		    base: '/js/plugin/layui-v2.3.0/layui/module/'
		}).extend({
		    treetable: 'treetable-lay/treetable'
		}).use(['treetable','table','layer','form'], function () {
		    var treetable = layui.treetable,table=layui.table,form = layui.form;
		    
			// 渲染表格
		    treetable.render({
		        treeColIndex: 1,          // treetable新增参数
		        treeSpid: 'root',             // treetable新增参数
		        treeIdName: 'id',       // treetable新增参数
		        treePidName: 'parentid',     // treetable新增参数
		        treeDefaultClose: true,   // treetable新增参数
		        treeLinkage: false,        // treetable新增参数
		        elem: '#pertable',
		        where:{
			    	params:{
			    		roleId:roleid,
			    	}
			    },
		        url: '/system/org/permission/getTreeTableJson',
		        cols: [[
		            {type: 'numbers'},
		            {field: 'permissionname', title: '权限名称'},
	            	{title: '选择范围权限',align:"center",templet:function(d){
	            		var str = '';
	            		for(var i = 0;i < rangeList.length;i++){
	            			var dataId="";
	            			if(d.range){
	            				dataId= 'data-id="'+d.range+'"';
	            			}
	            			if( d.range ==rangeList[i].id ){
	            				str += '<input type="radio" name="range'+d.id+'" '+dataId+' data-permission="'+d.id+'" lay-filter="range" value="'+rangeList[i].id+'" title="'+rangeList[i].rangeName+'" checked>'
	            			}else{
	            				str += '<input type="radio" name="range'+d.id+'" '+dataId+' data-permission="'+d.id+'" lay-filter="range" value="'+rangeList[i].id+'" title="'+rangeList[i].rangeName+'">'
	            			}
	            			
	            		}
	            		return str;
	            	}}
		        ]]
		    });
			
		    table.on('tool(pertable)',function(obj){
		    	
		    });
		    form.on('radio(range)', function(data){
		    	  var fkPermission = $(data.elem).attr("data-permission");
		    	  var fkRange = data.value; 
		    	  var fkRole = $("#roleid").val();
		    	  var id = "";
		    	  if($(data.elem).attr("data-id") && $(data.elem).attr("data-id") != ""){
		    		  id = $(data.elem).attr("data-id");
		    	  }
		    	  $.post("/system/org/range/saveRangeMap",{id:id,fkRole:fkRole,fkPermission:fkPermission,fkRange:fkRange},function(result){
		    		  
		    	  })
		    	}); 
			
			
		});
	
	</script>
</html>